(function () {
    var scroll = document.querySelector('.message-content');
    var divMind = [document.querySelector('.message-content-one'), document.querySelector('.message-content-two'), document.querySelector('.message-content-three'), document.querySelector('.message-content-four'), ];
    var divLeft= [document.querySelector('.message-content-one-right'), document.querySelector('.message-content-two-right'), document.querySelector('.message-content-three-right'), document.querySelector('.message-content-four-right'), ];
    var startx, starty;
    function getAngle(angy, angx){
      return Math.atan2(angy, angx) * 180 / Math.PI;
    };
    function getDirection(startx, starty, endx, endy){
        var angx = endx - startx;
        var angy = endy -starty;
        var result = 0;
        var angle = getAngle(angx, angy);
        if (angle >= -135 && angle <= -45) {
            result = 1;
        } else if ((angle >= -45 && angle <= 45)) {
            result = 2;
        } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
            result = 3;
        } else if (angle >= 45 && angle <= 135) {
            result = 4;
        }
        return result;
    }
    divLeft.forEach(function (value) {
        value.addEventListener('click', function () {
            value.parentElement.style.opacity = 0;
            setTimeout(function () {
                value.parentElement.style.display = 'none';
            },600)
        })
    });
    divMind.forEach(function (value, key) {
        value.addEventListener('click', function () {
            if (parseInt(getComputedStyle(value)['left']) !== 0) {
                value.style.left = 0;
            } else {
                console.log(key);
            }
        });
        value.addEventListener('touchstart', function (e) {
            startx = e.touches[0].pageX;
            starty = e.touches[0].pageY;
        });
        value.addEventListener('touchmove', function (e) {
            document.querySelector('.message-content-one').style.left = 0;
            document.querySelector('.message-content-two').style.left = 0;
            document.querySelector('.message-content-three').style.left = 0;
            document.querySelector('.message-content-four').style.left = 0;
            var endx, endy;
            endx = e.changedTouches[0].pageX;
            endy = e.changedTouches[0].pageY;
            var direction = getDirection(startx, starty, endx, endy);
            switch (direction) {
                case 1:
                    value.style.left = -15 + 'vw';
                    break;
                case 2:
                    scroll.style.top = 80 + 'px';
                    break;
                case 3:
                    scroll.style.top = -50 + 'px';
                    break;
                case 4:
                    value.style.left = 15 + 'px';
                    break;
                default:
            }
        });
        value.addEventListener('touchend', function (e) {
            scroll.style.top = 0;
        })
    });

})();